<template>
  <div class="text-effect">
    <span v-for="(item, index) in list" :key="index">{{ item }}</span>
  </div>
</template>

<script>
  import { defineComponent, reactive } from 'vue'
  export default defineComponent({
    props: {
      text: {
        type: String,
        default: ''
      }
    },
    setup(props) {
      let list = reactive({ list: [] })
      list = props.text.slice('')
      return { list }
    }
  })
</script>

<style lang="scss" scoped>
  .text-effect {
    color: #a76cff;
    font-size: $about-skill-name-size;
    font-weight: 700;
    text-align: left;
    margin: 0 auto;
    display: block;
    position: relative;
    letter-spacing: 1.5px;
    > span {
      display: inline-block;
      animation: animate linear 2500ms infinite;
    }
  }
  .text-effect span:nth-child(1n) {
    color: #585858;
    animation-delay: 0s;
  }

  .text-effect span:nth-child(2n) {
    color: #9d5cff;
    animation-delay: 100ms;
  }

  .text-effect span:nth-child(3n) {
    animation-delay: 200ms;
  }

  .text-effect span:nth-child(4n) {
    color: #585858;
    animation-delay: 300ms;
  }

  .text-effect span:nth-child(5n) {
    color: #9d5cff;
    animation-delay: 400ms;
  }

  .text-effect span:nth-child(6n) {
    color: #9d5cff;
    animation-delay: 500ms;
  }

  .text-effect span:nth-child(7n) {
    color: #585858;
    animation-delay: 600ms;
  }

  .text-effect span:nth-child(8n) {
    color: #9d5cff;
    animation-delay: 700ms;
  }

  .text-effect span:nth-child(9n) {
    animation-delay: 800ms;
  }

  .text-effect span:nth-child(10n) {
    animation-delay: 900ms;
  }

  @keyframes animate {
    0% {
      opacity: 0.7;
      transform: rotate(0deg) scale(1);
    }
    25% {
      transform: rotate(8deg) scale(0.98);
    }

    75% {
      transform: rotate(-8deg) scale(1.02);
    }
    100% {
      opacity: 1;
      text-shadow: 0 0 1px rgb(38, 93, 119), 0 0 1px rgba(0, 0, 0, 0.8), 0 0 1px DarkRed;
      font-weight: 600;
      transform: rotate(0deg) scale(1);
    }
  }
</style>
